<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
    
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    
    <title>流量数据看板</title>
</head>
<body>

<div class="container-fluid">

    <div class="row" align="center" style="margin-bottom:8px; margin-top:5px;">
                <form class="form-inline" action="$!{__beat.server.contextPath}/netflow/trend" method="post">
                        <div class="form-group" style="width:180px">
                            <label for="businessName" style="padding-left:15px;">业务线：</label>
                            <select id="businessName" name="businessName" class="form-control input-sm" style="align:center; width:100px; ">
                               #foreach($buss in $businessList)
                               #set($i = $velocityCount - 1)
                                    <option value="$buss" #if("$buss" == $!businessName) selected #end>$business_CN_Map.get("$buss")</option>
                                #end  
                            </select>
                        </div>  
                        <div class="form-group">                       
                               <input type="submit" value="查询" class="btn btn-primary btn-xs"> 
                        </div>
                </form>
    </div>

    <div class="dataconWrap">
        <div class="datacontent" id="qsContent">
            <div class="dataTit"><!-- 整体流量   -->
                <i class="mark"></i><span>整体流量</span>
            </div>
            <div>
            <table class="table table-bordered" style="text-align: center">
                <thead>
                <tr>
                    <th style="text-align: center">概况</th>
                    <th style="text-align: center">PV</th>
                    <th style="text-align: center">UV</th>
                    <th style="text-align: center">VPPV</th>
                    <th style="text-align: center">lide-pv</th>
                    <th style="text-align: center">lide-uv</th>
                    <th style="text-align: center">PV/UV</th>
                    <th style="text-align: center">VPPV/UV</th>
                </tr>
                </thead>
                <tbody id='totalflowtable'>
                    #foreach($row in $yesterdayTable)
                        #if(!$row.isEmpty())
                            <tr><td>#if($velocityCount==1)昨日($!stat_date)数据#elseif($velocityCount==2)日环比#elseif($velocityCount==3)周同比#elseif($velocityCount==4)月同比#end</td>
                                   #foreach($col in $row)<td>$col</td>#end
                           </tr>
                        #end
                    #end    
                </tbody>
            </table>
            </div> 
        </div>    

        <div class="datacontent"  >
            <div class="dataTit">
                    <i class="mark"></i><span>整体流量趋势</span>
            </div>

            <div class="dataShow">
                <div id='totalOption' dateGrp='stat_date' indexType='pv'>
                    <form class="form-inline">
                        <div  class="input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_total" type="checkbox">
                            </span>
                            <input id="time_input_total" type="text" class="form-control time" placeholder="添加对比" disabled>
                        </div>
                        <div class="input-group input-group-sm" style="margin-left: 26.5%">
                            <select id="index_total" class="form-control">
                                <option value="pv">PV</option>
                                <option value="uv">UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-uv</option>
                                <option value="pvDIVuv">pv/uv</option>
                                <option value="vppvDIVuv">vppv/uv</option>
                            </select>
                        </div>
                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnTotal" dateGrp='stat_date'>日</button>
                            <button type="button" class="btn btn-default btnTotal" dateGrp='week_begin'>周</button>
                            <button type="button" class="btn btn-default btnTotal" dateGrp='month_num'>月</button>
                        </div>
                    </form>
                </div>
                <div id="total" style="height:400px; "></div>
                
            </div>
        </div>
	
        <div class="datacontent">
            <div class="dataTit">
                <i class="mark"></i><span>三端流量趋势</span>
            </div>

            <div class="dataShow">
                <div id='platOption' dateGrp='stat_date' indexType='pv'>
                    <form class="form-inline">
                        <div  class="input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_plat" type="checkbox">
                            </span>
                            <input id="time_input_plat" type="text" class="form-control time" placeholder="添加对比" disabled>
                        </div>
                        <div class="input-group input-group-sm btn-tab" style="margin-left: 26.5%">
        					    <select id="index_plat" class="form-control">
                                <option value="pv">PV</option>
                                <option value="uv">UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-uv</option>
                                <option value="pvDIVuv">pv/uv</option>
                                <option value="vppvDIVuv">vppv/uv</option>
                            </select>
        				</div>                
                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnPlat" dateGrp='stat_date'>日</button>
                            <button type="button" class="btn btn-default btnPlat" dateGrp='week_begin'>周</button>
                            <button type="button" class="btn btn-default btnPlat" dateGrp='month_num'>月</button>
                        </div>
                    </form>
                </div>
    			
                <div id="total_platform" style="height:400px"></div>
            </div>
        </div>

      <div class="datacontent"  >
            <div class="dataTit">
                    <i class="mark"></i><span>月独立用户数MAU</span>
            </div>

            <div class="dataShow">
                <div id='mauOption' dateGrp='month_num' indexType='mau'>
                    <form class="form-inline">
                        <div  class="input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_mau" type="checkbox">
                            </span>
                            <input id="time_input_mau" type="text" class="form-control time" placeholder="添加对比" disabled>
                        </div>
                        <div class="input-group input-group-sm btn-tab" style="margin-left: 26.5%">
                                <select id="index_mau" class="form-control">
                                <option value="mau">MAU</option>
                                <option value="dauDIVmau">DAU/MAU</option>
                            </select>
                        </div>                

                    </form>
                </div>
                
                <div id="total_mau" style="height:400px"></div>
            </div>
        </div>




#if($!{businessName} != 'total')
        <div class="datacontent"  >
            <div class="dataTit">
                    <i class="mark"></i><span>$!{businessName_CN}三端流量占比($!{businessName_CN} / 总体)</span>
            </div>

            <div class="dataShow">       
            <div id='platRateOption' dateGrp='stat_date' indexType='pv'>
                <form class="form-inline">
                    <div  class="input-group input-group-sm" style="width: 20%;float: left">
                        <span class="input-group-addon">
                            <input id="time_checkbox_platRate" type="checkbox">
                        </span>
                        <input id="time_input_platRate" type="text" class="form-control time" placeholder="添加对比" disabled>
                    </div>
                    <div class="input-group input-group-sm btn-tab" style="margin-left: 26.5%">
                            <select id="index_platRate" class="form-control">
                            <option value="pv">PV</option>
                            <option value="uv">UV</option>
                            <option value="vppv">VPPV</option>
                            <option value="lide_pv">lide-pv</option>
                            <option value="lide_uv">lide-uv</option>
                        </select>
                    </div>                
                    <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default active btnPlatRate" dateGrp='stat_date'>日</button>
                        <button type="button" class="btn btn-default btnPlatRate" dateGrp='week_begin'>周</button>
                        <button type="button" class="btn btn-default btnPlatRate" dateGrp='month_num'>月</button>
                    </div>
                </form>
            </div>
            
            <div id="total_platRate" style="height:400px"></div>
        </div>
    </div>
#end



#if($!businessName != 'ershouche')
        <div class="datacontent"  >
            <div class="dataTit">
                    <i class="mark"></i>
                    #if($!businessName == 'total')
                         <span>业务线流量</span>
                    #else
                         <span>$!{businessName_CN}重点类别流量</span>
                    #end 
            </div>
           <div class="dataShow">
             <div id='cateOption' dateGrp='stat_date' indexType='pv'>
                <form class="form-inline">
                    <div  class="input-group input-group-sm" style="width: 20%;float: left">
                        <span class="input-group-addon">
                            <input id="time_checkbox_cate" type="checkbox">
                        </span>
                        <input id="time_input_cate" type="text" class="form-control time" placeholder="添加对比" disabled>
                    </div>
                    <div class="input-group input-group-sm" style="margin-left: 26.5%">
    					<select id="index_cate" class="form-control">
                            <option value="pv">PV</option>
                            <option value="uv">UV</option>
                            <option value="vppv">VPPV</option>
                            <option value="lide_pv">lide-pv</option>
                            <option value="lide_uv">lide-uv</option>
                            <option value="pvDIVuv">pv/uv</option>
                            <option value="vppvDIVuv">vppv/uv</option>
                        </select>
    				</div>                
                    <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                        <button type="button" class="btn btn-default active btnCate" dateGrp='stat_date'>日</button>
                        <button type="button" class="btn btn-default btnCate" dateGrp='week_begin'>周</button>
                        <button type="button" class="btn btn-default btnCate" dateGrp='month_num'>月</button>
                    </div> 
                </form>              
            </div>
            
            <div id="total_cate" style="height:400px"></div>
        </div>
    </div>
#end

#if($!businessName != 'ershouche' && $!businessName != 'total' )
        <div class="datacontent"  >
            <div class="dataTit">
                    <i class="mark"></i><span>$!{businessName_CN}重点二级类流量</span>
            </div>

           <div class="dataShow">    
            <div id='cityCateOption' dateGrp='stat_date' indexType='pv'>
                    <form class="form-inline">
                        <div  class="form-group input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox_cityCate" type="checkbox">
                            </span>
                            <input id="time_input_cityCate" type="text" class="form-control input-sm" placeholder="添加对比" disabled>
                        </div>

                        
                        <div class="form-group" style="width:180px">
                            <label for="city1" style="padding-left:15px;">城市：</label>
                            <select id="city1" class="form-control input-sm" style="width:100px; ">
                                    <option value="all">全国</option>
                                #foreach($city in $cityOneList)
                                     <option value="$city">$city</option>
                                #end  
                            </select>
                        </div> 

                        <div class="form-group" style="width:150px">
                            <label for="cate2" style="padding-left:0px;">类别：</label>
                            <select id="cate2" class="form-control input-sm" style="align:center; width:100px; ">
                                #foreach($cate2 in $cateTwoList)
                                     <option value="$cate2">$cate2</option>
                                #end  
                            </select>
                        </div>
                       
                        <div class="form-group">
                            <select id="index_cityCate" class="form-control input-sm" style="align:center; width:100px;">
                                <option value="pv">PV</option>
                                <option value="uv">UV</option>
                                <option value="vppv">VPPV</option>
                                <option value="lide_pv">lide-pv</option>
                                <option value="lide_uv">lide-uv</option>
                                <option value="pvDIVuv">pv/uv</option>
                                <option value="vppvDIVuv">vppv/uv</option>
                            </select>
                        </div>
                         <button id="refreshCityCate_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>                        
                        <div class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnCityCate" dateGrp='stat_date'>日</button>
                            <button type="button" class="btn btn-default btnCityCate" dateGrp='week_begin'>周</button>
                            <button type="button" class="btn btn-default btnCityCate" dateGrp='month_num'>月</button>
                        </div>   
                    </form>                 
            </div>
            
            <div id="total_cityCate" style="height:400px"></div>
        </div>
    </div>
#end
    </div>
</div>
</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/source/echarts.js"></script>
<!-- <script src="$!{__beat.server.contextPath}/js/wnl.js"></script> -->
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">
    var cate = "$!{businessName}";
    var dayMap={1:"周一",2:"周二",3:"周三",4:"周四",5:"周五",6:"周六",0:"周日"};
	var datepicker_op={
        format: "yyyy-mm-dd",
        clearBtn: false,
        language: "zh-CN",
        autoclose: true,
        todayHighlight: true,
        minViewMode:0,
		orientation: "top left"
    };

	function getDate(yyyymmdd){
        if(yyyymmdd.length==10){        //yyyy-MM-dd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(5,2)+'/'+yyyymmdd.substr(8,2));
        }else if(yyyymmdd.length==8){       //yyyyMMdd
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2)+'/'+yyyymmdd.substr(6,2));
        }else if(yyyymmdd.length==6){   //yyyyMM
            return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2));
        }
    }

    //获取星期几 dayDate 的格式为 yyyy-MM-dd
    function getWeekDay(dayDate){
        var jsDate = new Date(Date.parse(dayDate.replace(/\-/g,'/')));
        var weekNumber = jsDate.getDay();
        return dayMap[weekNumber];
    }

    function setDatePicker(ec,dateGrp,input){
        if('week_begin'==dateGrp){
        }else if('month_num'==dateGrp){
            datepicker_op.minViewMode=1;
            datepicker_op.format='yyyy-mm';
        }else{
            datepicker_op.minViewMode=0;
            datepicker_op.format='yyyy-mm-dd';
        }
        input.datepicker('remove');
        input.datepicker(datepicker_op);
        //获取显示的日期数组
        var days_show=ec.getShowDays();
        var days_all=ec.getAllDays();
        //设置时间可选范围
        input.datepicker('setStartDate',new Date(getDate(days_all[0])));
        input.datepicker('setEndDate',new Date(getDate(days_all[days_all.length-days_show.length])));
    }

    function changeDateGrp(item){
        var dateGrpVal = $(item).attr('dateGrp');
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('dateGrp',dateGrpVal);
    }

    function changeIndex(item){
        var indexVal = $(item).val();
        var curDiv = $(item).closest('div[dateGrp]');
        $(curDiv).attr('indexType',indexVal);
    }

    $('.btn-tab button').click(function(e){
        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
    });

    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/js/netflow"}});
	
    var charts = [];
	 //整体流量趋势图
    require(['dashboard/netflow_line_v2'],function(totalEC){
        charts.push(totalEC);
        totalEC.show(cate,2);
    });

    //三端流量图
    require(['dashboard/netflow_platform_v3'],function(platformEC){
        charts.push(platformEC);
        platformEC.show(cate,2);

    });

#if($!{businessName} != 'total')
    //三端流量 占总体三端流量比
    require(['dashboard/netflow_platformRate_v3'],function(platformRateEC){
        charts.push(platformRateEC);
        platformRateEC.show(cate,2);
    });
#end

    //月独立MAU
    require(['dashboard/netflow_mau_v3'],function(mauEC){
        charts.push(mauEC);
        mauEC.show(cate,2);

    });
    
#if($!businessName != 'ershouche') 
    //分类别流量图
    require(['dashboard/netflow_cate_v3'],function(cateEC){
        charts.push(cateEC);
        cateEC.show(cate,2);
    });
#end

#if($!businessName != 'ershouche' && $!businessName != 'total')
    //城市类别流量图
    require(['dashboard/netflow_city_cate2_v4'],function(cityCateEC){
        charts.push(cityCateEC);
        cityCateEC.show(cate,2);
    });
#end

	//格式化输出数字
	function format_number(n){
        var b=parseInt(n).toString(); 
        var len=b.length; 
        if(len<=3){return b;} 
        var r=len%3; 
        return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(","); 
    };

    $('#totalflowtable tr').each(function(row_index,row_element){
         if(row_index==0){
    	       $(row_element).children().each(function(col_index,col_element){
    		   if(isNaN($(col_element).text())||col_index==6||col_index==7){return}
    		   $(col_element).text(format_number($(col_element).text()));
    		   });		   
    		   return;
           }
       $(row_element).children().each(function(col_index,col_element){
       if(isNaN($(col_element).text())){return}
       		   $(col_element).text(''+$(col_element).text()+"%");
          	if($(col_element).text().indexOf('-')!=-1){
                $(col_element).addClass('text-success');
    			$(col_element).append('<i class="downi"></i>');
            }else{
                $(col_element).addClass('text-danger');
    			$(col_element).append('<i class="upi"></i>');
            }
       })
    });

    $(window).resize(function(){
        $.each(charts,function(i,n){
            n.echart.resize();
        });
    });

</script>
</html>